<template>
  <div class="app-container">
    <div class="background"></div>
    <!-- 只在非登录页面显示Header -->
    <Header v-if="$route.path !== '/login'" />
    <div class="main-content">
      <!-- 只在非登录页面显示Sidebar -->
      <Sidebar v-if="$route.path !== '/login'" />
      <router-view class="router-view" />
    </div>
  </div>
</template>

<script setup>
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import { useRoute } from 'vue-router'
// 在main.js中全局导入样式，避免在组件中重复导入
// import './styles/theme.css'
// import './styles/components.css'
// import './styles/common-styles.css'

// 为了在模板中使用$route
useRoute()
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  background-color: var(--bg-light);
  color: var(--text-primary);
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);
  opacity: 0.8;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.router-view {
  flex: 1;
  padding: var(--spacing-lg);
  overflow-y: auto;
  background-color: var(--bg-white);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .main-content {
    position: relative;
  }
  
  .router-view {
    padding: var(--spacing-md);
  }
}
</style>